<template>
  <div class="table-box">
    <ProTable ref="refTable" :columns="columnProps" :request-api="SearchAccountList" title="用户列表">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button v-auth="BtnAuthCreate" :icon="CirclePlus" type="success" @click="CreateData">新增数据</el-button>
        <el-button :icon="Upload" plain type="primary" @click="importData">导入数据</el-button>
        <el-button v-auth="'export'" :icon="Download" plain type="primary" @click="ExportData">导出数据</el-button>
        <el-button :disabled="!scope.isSelected" :icon="Delete" plain type="danger" @click="DeleteData(scope.selectedListIds)">
          删除选中
        </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button v-auth="BtnAuthUpdate" :icon="EditPen" link type="primary" @click="UpdateData(scope.row)"> 编辑 </el-button>
        <el-button v-auth="BtnAuthDelete" :icon="Delete" link type="primary" @click="DeleteData(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <CreateSysUser ref="refCreatePop" @reload="ReloadData"></CreateSysUser>
    <UpdateSysUser ref="refUpdatePop" @reload="ReloadData"></UpdateSysUser>
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script lang="ts" name="accountManage" setup>
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import {
  requestSysUserDelete,
  requestSysUserExport,
  requestSysUserImport,
  requestSysUserSearch,
  requestSysUserTemplateFile
} from "@/api/modules/sysUser";
import { ColumnProps } from "@/components/ProTable/interface";
import CreateSysUser from "./components/create.vue";
import UpdateSysUser from "./components/update.vue";
import { CirclePlus, Delete, Download, EditPen, Upload } from "@element-plus/icons-vue";
import { dtoSysUserDelete, dtoSysUserInfo } from "@/api/dbdto/dtoSysUser";
import { getUpdatedColumnsSysUser } from "./columns/resetList";
import { ElMessage, ElMessageBox } from "element-plus";
import { ResultData } from "@/api/interface";
import { RespOk } from "@/constant/codes";
import { SysUser } from "@/views/system/sysUser/columns/data";
import listColumns = SysUser.listColumnsData;
import { BuildSearchWhere } from "@/utils/buildSearchWhere";
import { BtnAuthCreate, BtnAuthDelete, BtnAuthUpdate } from "@/constant/enums/btn_permission";
import ImportExcel, { ExcelParameterProps } from "@/components/ImportExcel/index.vue";
import { useDownload } from "@/hooks/useDownload";
import { ExportMaxNum } from "@/constant/sys";
import { GetNowDate } from "@/utils/date";

const refCreatePop = ref();
const refUpdatePop = ref();
const refTable = ref();
//onBeforeMount
const columnProps = ref<ColumnProps[]>(getUpdatedColumnsSysUser(listColumns));

//创建数据
const CreateData = () => {
  refCreatePop.value.ShowPop();
};

//刷新数据
const ReloadData = () => {
  if (refTable.value) {
    refTable.value.getTableList();
  }
};

// 导入数据
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const importData = () => {
  const params: ExcelParameterProps = {
    title: "SysUser",
    tempApi: requestSysUserTemplateFile, //下载模板文件api
    importApi: requestSysUserImport, //上传api
    getTableList: refTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};

//删除数据(可以批量也可以删除单个)
const DeleteData = (data: dtoSysUserInfo | number[]) => {
  let ids = Array.isArray(data) ? data : [data["id"]];
  ElMessageBox.confirm("删除后不可恢复，是否确定?", "删除确认，共" + ids.length + "条数据", {
    confirmButtonText: "确定",
    cancelButtonText: "再想想",
    type: "warning"
  }).then(() => {
    let params: dtoSysUserDelete = {
      id: ids
    };
    requestSysUserDelete(params).then((res: ResultData<any>) => {
      if (res.code == RespOk) {
        ElMessage({ type: "success", message: "删除完成" });
        refTable.value.getTableList();
      }
    });
  });
};

const UpdateData = (row: dtoSysUserInfo) => {
  refUpdatePop.value.ShowPop(row);
};

// 导出数据
const ExportData = async () => {
  //构造查询参数
  let searchParams = BuildSearchWhere(refTable.value?.searchParam, columnProps.value);
  searchParams.extra.pageSize = ExportMaxNum; //设置最大导出数量
  ElMessageBox.confirm("如果导出数据大于" + ExportMaxNum + "条请分批导出", "温馨提示", { type: "warning" }).then(() =>
    useDownload(requestSysUserExport, "exportSysUser" + GetNowDate(), searchParams)
  );
};

const SearchAccountList = (params: any) => {
  //构造查询参数
  let searchParams = BuildSearchWhere(params, columnProps.value);
  //向后端发送请求
  return requestSysUserSearch(searchParams);
};
</script>
